<template>
  <div class="news">
    <my-header></my-header>
    <div class="container">
    <img
      class="img1"
      src="http://www.yhachina.com/images/exhibition/exhibition-banner4.jpg"
      alt=""
    />
    <div class="banner">
      <div class="top">
        <h2>最新资讯</h2>
        <div>
          <router-link tag="a" to="/web-info-lists/video">视频</router-link>
          <router-link tag="a" to="/web-info-lists/jmxx">加盟信息</router-link>
          <router-link tag="a" to="/web-info-lists/jchd">精彩活动</router-link>
          <router-link tag="a" to="/web-info-lists/zbdt">总部动态</router-link>
          <router-link tag="a" to="/web-info-lists/lsdt">旅舍动态</router-link>
        </div>
      </div>
      <div class="bottom">
        <div class="left">
          <router-view></router-view>
        </div>
        <div class="right">
          <router-link to="/yuding">
            <b></b>
            旅舍预订
          </router-link>
          <router-link to="/vip">
            <b></b>
            会员卡
          </router-link>
          <router-link to="/join">
            <b></b>
            旅舍加盟
          </router-link>
          <a href="">
            <img
              src="http://www.yhachina.com/data/images/2020-08-19/5f3cb08134015.jpg"
              alt=""
            />
          </a>
        </div>
      </div>
    </div>
  </div>
  <my-footer></my-footer>
  </div>
  
</template>

<script>
import MyHeader from '@/components/MyHeader.vue';
import MyFooter from '@/components/MyFooter.vue';
export default {
  components: { MyHeader, MyFooter },
  data() {
    return {
      waterfallArr: [
        {
          url: "http://www.yhachina.com/data/images/2021-07-02/60de88a2cf185.jpg",
          title: "YHA云南夏令营 | “人与自然”（6-11岁）",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-05-21/5ec5f10aaa5b7.jpg",
          title: "青年旅舍第一批免费电子卡—送给谁？",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-09-18/5f6488b4da217.jpg",
          title: "这个周末，来深圳慈展会和我们偶遇吧",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-09-01/5f4df4133aa52.png",
          title: "开放征稿啦｜投稿你的旅行笔记，有小礼物等你拿",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-08-19/5f3c9b377f499.jpg",
          title: "青年旅舍111年，开一个线上故事会吧",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-07-28/5f1fc5fe1ee21.jpg",
          title: "大自然的美好, 一起分享，一起成长",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-07-16/5f100c09dca3b.jpg",
          title: "夏天的风轻轻吹着| 第44届世界青年营回顾",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-07-16/5f101f26274a7.png",
          title: "六一特辑|两天一晚自然体验营",
        },
        {
          url: "http://www.yhachina.com/data/images/2020-05-21/5ec5f60f7dfdd.png",
          title: "世界地球日 | 环保大让利，“以旧代金”去青年旅舍消费吧！",
        },
        {
          url: "http://www.yhachina.com/data/images/2019-08-07/5d4a4b1867488.png",
          title: "下一站，努沙 - 青年旅舍来买单！",
        },
        {
          url: "http://www.yhachina.com/data/images/2019-07-24/5d37e0c6d7331.jpg",
          title: "暑期研学旅行招募 | 14天带你探访古老又现代的德国",
        },
        {
          url: "http://www.yhachina.com/data/images/2019-04-04/5ca564dfc1255.JPG",
          title: "世界青年营“早鸟价”最后1天，现在报名还你一个难忘的暑假！",
        },
        {
          url: "http://www.yhachina.com/data/images/2019-04-04/5ca560d80b4f5.jpg",
          title: "招募 | 韩国“世界青年营”又来啦，今年我们去看世界文化遗产！",
        },
        {
          url: "http://www.yhachina.com/data/images/2018-08-21/5b7badf7ec35b.jpg",
          title: "明知山有釜，偏向釜山行 | 2018韩国“世界青年营”回顾二",
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
}
.img1 {
  width: 100%;
  display: block;
}
.banner {
  width: 1080px;
  margin: 0 auto;
  position: relative;
  > .top {
    display: block;
    width: 100%;
    border-radius: 5px;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    padding: 30px;
    position: absolute;
    top: -60px;
    margin-bottom: 60px;
    box-shadow: 0 15px 35px -15px rgb(47 130 36 / 70%);
    // box-sizing: content-box;

    > h2 {
      color: #333333;
    }
    > div {
      background-color: #fff;
      a {
        width: 110px;
        height: 30px;
        background-color: #87c524;
        text-align: center;
        line-height: 30px;
        display: inline-block;
        border-radius: 15px;
        color: white;
        font: 14px;
        text-decoration: none;
        &:hover {
          background-color: #f7941c;
        }
        &:focus {
          background-color: #f7941c;
        }
      }
    }
  }
  > .bottom {
    padding-top: 80px;
    display: flex;
    justify-content: space-between;
    .left {
      width: 810px;
      display: flex;
      flex-wrap: wrap;
    }

    .right {
      right: 0;
      display: flex;
      flex-direction: column;
      width: 240px;
      height: 500px;
      a {
        display: inline-block;
        height: 80px;
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 1px;
        line-height: 80px;
        color: #fff;
        border-radius: 5px;
        background-image: url(../assets/img/1.png);
        background-repeat: no-repeat;
        background-position: right 20px center;
        text-decoration: none;

        b {
          display: inline-block;
          width: 30px;
          height: 30px;
          background-image: url(http://www.yhachina.com/css/app_z.png);
          background-position: -389px -422px;
          vertical-align: middle;
          margin: 0 10px 0 20px;
        }
        &:first-child {
          background-color: #87c524;
        }
        &:nth-child(2) {
          background-color: #f7941c;
        }
        &:nth-child(3) {
          background-color: #4b8fcc;
        }
        &:last-child {
          img {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>